<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-13 09:04:57
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-24 11:17:14
-->
<template>
    <div id="container">
        <!-- 整机销量 -->
        <earthMapXs></earthMapXs>
        <!-- 整机日销量 -->
        <dayTable></dayTable>
        <!-- 整机日销量pie -->
        <daySalesPie></daySalesPie>
        <!-- 所属片区日销量top10 -->
        <daySalesBar></daySalesBar>
        <!-- 近十日销量对比 -->
        <tendaySalesLine></tendaySalesLine>
        <!-- 整机月销量 -->
        <monthTable></monthTable>
        <!-- 整机月销量pie -->
        <monthSalesPie></monthSalesPie>
        <!-- 近十月销量对比 -->
        <tenmonthSalesLine></tenmonthSalesLine>
        <!-- 销售目标 line -->
        <targetLine></targetLine>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    PropType,
    reactive,
    toRefs,
    ref,
    provide,
    nextTick,
    onMounted,
} from "vue";
import { useRouter } from "vue-router";
import {
    earthMapXs,
    dayTable,
    monthTable,
    daySalesBar,
    tendaySalesLine,
    tenmonthSalesLine,
    daySalesPie,
    monthSalesPie,
    targetLine,
} from "./xiaoshouCom";
import store from "@/store";
export default defineComponent({
    name: "xiaoshou",
    components: {
        earthMapXs,
        dayTable,
        monthTable,
        daySalesBar,
        tendaySalesLine,
        tenmonthSalesLine,
        daySalesPie,
        monthSalesPie,
        targetLine,
    },
    props: {},
    setup() {
        const router = useRouter();
        const state = reactive({});
        onMounted(() => {
            store.dispatch("xiaoshou/getjxList");
            store.dispatch("xiaoshou/getPq");
        });
        return {
            ...toRefs(state),
        };
    },
});
</script>

<style lang="scss" scoped>
#container {
    color: #fff;
    background-color: #060f46;
}
</style>
